<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 4. table -->
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	
	<!-- 3. 样式文件 -->
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
	<!-- 1. jQuery -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	 
	<!-- 2. DataTables -->
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

	
	<title>datatable学习</title>
</head>
<body>
	<div class="container">
		<table class="table table-hover table-bordered" id="data-table">
			<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>邮箱</th>
					<th>手机号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>asion</td>
					<td>选项3</td>
					<td>选项4</td>
					<td>选项5</td>
				</tr>
				<tr>
					<td>2</td>
					<td>marks</td>
					<td>选项3</td>
					<td>选项4</td>
					<td>选项5</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script type="text/javascript" src="./comingSoon.js"></script>
<script type="text/javascript">
	// 一般这个数据都是通过接口获取 ajax交互
	var data = [
	        {
	        	"id": 			12,
	            "name":       "Tiger Nixon",
	            "position":   "System Architect",
	            "salary":     "$3,120",
	            "start_date": "2011/04/25",
	            "office":     "Edinburgh",
	            "extn":       "5421"
	        },
	        {
	        	"id": 		   23,
	            "name":       "Garrett Winters",
	            "position":   "Director",
	            "salary":     "$5,300",
	            "start_date": "2011/07/25",
	            "office":     "Edinburgh",
	            "extn":       "8422"
	        }
	    ];
	// ajax的回调执行
	// DataTable 参数对象里面的属性是有很多的，不用记忆，直接百度手册
	$("#data-table").DataTable({
		oLanguage: {  
                "sProcessing":   "处理中...",  
                "sLengthMenu":   "显示 _MENU_ 项结果",  
                "sZeroRecords":  "没有匹配结果",  
                "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",  
                "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",  
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
                "sInfoPostFix":  "",  
                "sSearch":       "搜索:",  
                "sUrl":          "",  
                "oPaginate": {  
                    "sFirst":    "首页",  
                    "sPrevious": "上页",  
                    "sNext":     "下页",  
                    "sLast":     "末页"  
                }  
            },
        "lengthMenu": [[2, 10, 25, 50, -1], ['二', '十', '二十五', '五十', '所有']],
		data: data,
		columns: [
			{data: 'id'}, // 定义一列
			{data: 'name'}, // 定义一列
			{data: 'position'}, // 定义一列
			{data: 'salary'}, // 定义一列
			{data: null, defaultContent: '编辑 | 删除', "bSortable": false}, // 属于操作列，不对应任何数据，只做编辑和删除
		], // 数组定义数据源里面的属性和表的列的对应关系
	}); // 当引入插件后，会在jQuery上面扩充一个 DataTable 方法
	// 问题：现在数据是写在页面上，一般来说我们都是通过ajax请求获取，然后在页面进行展示。
	// 数据来源 1. js原生数组 2. js对象 3. 可以通过 api 调用 json---》js里面对象
</script>
</html>